<template>
	<view class="wrap">
		<view class="conts">
			<view class="header">
				<text v-if="!del" @click="handleEdit">编辑</text>
				<text v-else @click="handleComplete">完成</text>
			</view>
			<view class="content">
				<block v-if="lists.length > 0">
					<view class="item" v-for="(item, index) in lists" :key="index">
						<!-- <view class="del">
							<u-icon name="trash" @click="handleDel(item.id)" size="20"></u-icon>
						</view> -->
						<view class="item_info">
							<view class="radio" @click="handleSelect(item)">
								<radio color="#E1222A" :checked="item.isselect"/>
							</view>
							<view class="info">
								<view class="img_wrap">
									<image :src="item.lists.image" mode="aspectFill"></image>
								</view>
								<view class="detail">
									<view class="title">{{item.lists.name}}</view>
									<view class="gui">
										规格：{{item.attrs[0]}}
									</view>
									<view class="price">
										<text>￥{{item.price}}</text>
										<text>X{{item.number}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</block>
				<view class="empty" v-else>
					<u-empty></u-empty>
				</view>
			</view>
			<view class="bottom">
				<view class="radio" @click="handleAllSelect">
					<radio color="#E1222A" :checked="allSelect"/>
					<text>全选</text>
				</view>
				<view class="total" v-if="!del">
					<text>合计：</text> 
					<text class="price">{{total_price}}</text>
				</view>
				<view class="btn" v-if="!del" @click="handlePay">去结算</view>
				<view class="btn" v-else @click="handleDel">删除</view>
			</view>
		</view>
	</view>
</template>

<script>
import { cartList, delCart, preOrder } from  '@/api/index.js'

	export default {
		data() {
			return {
				lists: [],
				allSelect: 0,
				activeList: [],
				page: 1,
				last_page: null,
				del: false
			}
		},
		
		onShow() {
			this.getData()
		},
		
		computed: {
			total_price() {
				var money = 0
				this.activeList.forEach(item => {
					money += item.number * item.price
				})
				return money.toFixed(2)
			}
		},
		
		onReachBottom() {
			if (this.page == this.last_page) {
				uni.showToast({
					title: '已经是最后一页了',
					icon: 'none'
				})
			} else {
				this.page++
				this.getData()
			}
		},
		
		methods: {
			async getData () {
				if (this.page == 1) {
					this.lists = []
					this.allSelect = 0
					this.activeList = []
				}
				await cartList({
					page: this.page
				}).then(res => {
					res.data.data.forEach(item => {
						item.isselect = 0
						this.lists.push(item)
					})
					this.last_page = res.data.last_page
				})
			},
			
			handleEdit () {
				this.lists.forEach(item => {
					item.isselect = 0
				})
				this.del = true
				this.allSelect = 0
				this.activeList = []
			},
			
			handleSelect (item) {
				var arr = []
				this.activeList = []
				if (item.isselect == 0) {
					item.isselect = 1
					this.lists.forEach(i => {
						arr.push(i.isselect)
					})
					if (arr.indexOf(0) == -1) {
						this.allSelect = 1
					} else {
						this.allSelect = 0
					}
				} else {
					item.isselect = 0
					this.allSelect = 0
				}
				this.lists.forEach(i => {
					if (i.isselect) {
						this.activeList.push(i)
					}
				})
			},
			
			handleAllSelect () {
				this.activeList = []
				if (this.allSelect == 0) {
					this.allSelect = 1
					this.lists.forEach(item => {
						item.isselect = 1
						this.activeList.push(item)
					}) 
				} else {
					this.allSelect = 0
					this.lists.forEach(item => {
						item.isselect = 0
					}) 
				}
			},
			
			handleDel () {
				if (this.activeList.length <= 0) {
					uni.$u.toast('请选择要删除的商品')
					return
				}
				let params = []
				this.activeList.forEach(item => {
					params.push(item.id)
				})
				delCart({ids: params.join(',')}).then(res => {
					uni.$u.toast(res.msg)
					setTimeout(() => {
						this.page = 1
						this.getData()
					}, 1200)
				})
			},
			
			handleComplete () {
				this.lists.forEach(item => {
					item.isselect = 0
				})
				this.del = false
				this.allSelect = 0
				this.activeList = []
			},
			
			async handlePay () {
				if (this.activeList.length <= 0) {
					uni.$u.toast('请选择商品')
					return
				}
				let params = []
				this.activeList.forEach(item => {
					params.push(`sku_id:${item.sku_id},number:${item.number}`)
				})
				let res = await preOrder({
					data: params.join('|')
				})
				if(res.code == 1){
					uni.navigateTo({
						url:`/pageB/orderPay?tag=${res.data}`
					})
				}else{
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		min-height: 100vh;
		height: fit-content;
		background-color: #f6f6f6;
		box-sizing: border-box;
		
		.conts {
			position: relative;
			z-index: 1;
			padding: 0 0 168rpx;
			box-sizing: border-box;
			
			.header {
				width: 100%;
				padding: 24rpx;
				box-sizing: border-box;
				background-color: #fff;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				
				text {
					color: #000;
					font-size: 28rpx;
				}
			}
			
			.content {
				padding: 24rpx;
				width: 100%;
				box-sizing: border-box;
				
				.item {
					padding: 24rpx;
					margin-bottom: 24rpx;
					border-radius: 12rpx;
					background-color: #fff;
					box-sizing: border-box;
					
					.del {
						display: flex;
						justify-content: flex-end;
						margin-bottom: 16rpx;
					}
					
					.item_info {
						width: 100%;
						display: flex;
						align-items: center;
						
						.info {
							flex: 1;
							width: 80%;
							height: 220rpx;
							display: flex;
							align-items: center;
							
							.img_wrap {
								width: 226rpx;
								height: 220rpx;
								margin: 0 16rpx 0 14rpx;
								border-radius: 16rpx;
								
								image {
									width: 100%;
									height: 100%;
									border-radius: 16rpx;
								}
							}
							
							.detail {
								width: calc(100% - 250rpx);
								height: 220rpx;
								display: flex;
								flex-direction: column;
								justify-content: space-between;
								
								.title {
									font-size: 30rpx;
									color: #232323;
									overflow: hidden;
									white-space: nowrap;
									text-overflow: ellipsis;
									word-break: break-all;
									margin-bottom: 16rpx;
								}
								
								.gui {
									font-size: 26rpx;
									color: #666666;
									flex: 1;
								}
								
								.price {
									display: flex;
									align-items: center;
									justify-content: space-between;
									
									text {
										font-size: 32rpx;
										color: #E1222A;
									}
								}
							}
						}
					}
				}
				
				.empty {
					width: 100%;
					height: 80vh;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
		
		.bottom {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			height: 168rpx;
			position: fixed;
			bottom: 0;
			left: 0;
			padding: 0 30rpx;
			background-color: #fff;
			z-index: 99;
			box-sizing: border-box;
			
			.total {
				display: flex;
				align-items: center;
				flex: 1;
				margin-left: 54rpx;
				
				text {
					font-size: 32rpx;
					color: #232323;
				}
				
				.price {
					font-size: 40rpx;
					color: #E1222A;
				}
			}
			
			.btn {
				width: 204rpx;
				height: 80rpx;
				font-size: 30rpx;
				color: #FFFFFF;
				line-height: 80rpx;
				text-align: center;
				background: #FC2F27;
				border-radius: 40rpx;
			}
		}
	}
	
	.radio {
		display: flex;
		align-items: center;
	}
</style>
